<template>
	<div>
		<ma-body>
			<ma-refresh slot="content" :safeBottom="false" :refresh="false">
				<image src="@/static/img/isBack.png" mode="aspectFill" class="backImg" @tap="toBack"></image>
				<div>
					<div class="stoneTotal-box">
						<image src="@/static/img/gashaponImg/stone.png" mode="aspectFill" class="stone-img"></image>
						<span class="total-num">{{ user.myWallet.signCoins }}</span>
						<span class="stotal-text">我的灵石</span>
						<div class="look-box" @tap.stop="toStoneDetail">
							<span class="look-text">查看明细</span>
							<image src="../../../static/img/enter16.png" mode="aspectFill" class="image427"></image>
						</div>
					</div>
					<div class="stone-box">
						<div class="info-box">
							<div style="padding: 0 5.33vw;">
								<span class="jiu-font32-fff"
									style="color: #555;margin-bottom: 2.14vw;display: block;">每日任务</span>
								
								<div class="task-list">
									<div class="task-item" v-for="item in taskList" @tap="onTap(item.key)">
										<span class="jiu-font28-fff">{{ item.title }}（{{ item.complete }}/{{ item.count }}）</span>
										<div class="item-info">
											<div class="center">
												<image src="@/static/img/gashaponImg/stone.png" mode="aspectFill" class="image427"></image>
												<span class="jiu-font24-000" style="color: #A972FF;">×{{ item.integral }}</span>
											</div>
											<div class="center">
												<span class="jiu-font24-000" style="color: #FFCE80;">去{{ item.title }}</span>
												<image src="../../../static/img/enter16.png" mode="aspectFill"
													class="image427"></image>
											</div>
										</div>
									</div>
								</div>
								<span class="jiu-font32-fff center"
									style="color: #555;margin-bottom: 2.14vw;display: block;margin-top: 8.53vw;">
									<label>灵石商城</label> <label class="title-border">{{ $val('txt:Integral:mall:publicity') }}</label>
								</span>
							</div>
							

							<div class="product-list">
								<div class="product-item" v-for="item in page.list" @tap="selectProduct(item)">
									<image :src="item.cover" mode="aspectFill" class="product-img"></image>
									<div class="product-info">
										<span class="product-title">{{ item.title }}</span>
										<div class="center" style="justify-content: space-between;margin-top: 4vw;">
											<div class="center">
												<image src="../../../static/img/gashaponImg/stone.png" mode="aspectFill" class="image427"></image>
												<span class="jiu-font24-000" style="color: #A972FF;margin-left: 0.8vw;">{{ item.price }}</span>
											</div>
											<div class="center">
												<span class="jiu-font24-000" style="color: #FFCE80;">兑换</span>
												<image src="../../../static/img/enter16.png" mode="aspectFill" class="image427"></image>
											</div>
										</div>
									</div>
								</div>
							</div>

						</div>
					</div>
				</div>
			</ma-refresh>
		</ma-body>
		<u-popup v-model="productShow" mode="bottom" border-radius="32">
			<div class="egg-box">
				<div class="egg-info">
					<image :src="productItem.cover" mode="aspectFill" class="egg-image"></image>
					<div class="egg-bottom">
						<span class="jiu-font48-fff" style="font-size: 4.8vw;">{{ productItem.title }}</span>
						<div class="egg-num">
							<image src="@/static/img/gashaponImg/stone.png" mode="aspectFill" class="image64"></image>
							<span class="jiu-font24-000" style="color: #A972FF;margin-left: 1.07vw;">{{ productItem.price }}</span>
						</div>
					</div>
				</div>
				<div class="num-box" v-if="productItem.type != 'blind_box' && productItem.type != 'collection'">
					<span class="jiu-font28-555" style="font-weight: 300;margin-top: 4.27vw;margin-bottom: 2.13vw;display: block;">数量</span>
					<div class="nums-box">
						<u-icon name="minus" :color="minusColor" size="20" @tap="numTap('minus')"></u-icon>
						<span class="num">{{ num }}</span>
						<u-icon name="plus" color="#bbb" size="25" @tap="numTap('plus')"></u-icon>
					</div>
				</div>
				<div class="gash-btn">
					<span @tap="onExchange">立即兑换</span>
				</div>
			</div>
		</u-popup>
		<u-modal v-model="cancelModal" :content="content" @confirm="buy" :show-cancel-button="true"></u-modal>
		<product-modal ref="productModal"></product-modal>
	</div>
</template>

<script>
	import productModal from '@/subPackA/components/product-modal/product-modal';
	import Refresh from '@/$ma/common/js/refresh.js';
	export default {
		components: {
			productModal
		},
		data() {
			return {
				productShow: false,
				taskList: [],
				page: new Refresh(this,{
					apiName: 'getMallProductList'
				}),
				productItem: {},
				num: 1,
				cancelModal: false,
				content: '确定兑换该数字藏品吗？',
			}
		},
		methods:{
			async getTaskList(){
				let res = await this.$u.api.getTaskList();
				console.log(res)
				this.taskList = res;
			},
			toStoneDetail(){
				this.$ma.route.stoneDetail()
			},
			selectProduct(item){
				this.productItem = item;
				this.productShow = true;
				console.log(item)
			},
			numTap(status){
				if(status == 'minus') {
					if(this.num == 1) return;
					else this.num--;
				}else if(status == 'plus'){
					this.num++
				}
			},
			onExchange(){
				this.cancelModal = true;
			},
			buy(){
				let data = {
					goodsId: this.productItem.id,
					count: 1
				};					
				if(this.productItem.type != 'blind_box' && this.productItem.type != 'collection'){
					data.count = this.num;
				}
				this.$u.api.onMallPurchase({},data).then(res=>{
					this.$store.dispatch('user/getMyWallet')
					console.log(res)
					this.productShow = false;
					uni.showToast({
						icon: 'none',
						title: '兑换成功'
					})
					setTimeout(()=>{
						let obj = {
							info: {
								cover: res.cover,
								spuTitle: res.title
							}
						}
						this.$refs.productModal.open({
							obj,
							success: async()=>{
								let id;
								if(res.type == 'collection') id = 0;
								else id = 1;
								uni.showToast({
									icon: 'none',
									title: '跳转中，请稍后'
								})
								setTimeout(()=>{
									this.$ma.route.myCollection({
										currentIndex: id
									})
								},4000)
							}
						})
					},1000)
				})
			},
			onTap(key){
				if(key == 'sign'){
					this.$ma.route.signIn()
				}else if(key == 'invite'){
					this.$ma.route.inviteEvents()
				}else return uni.showToast({
					icon: 'none',
					title: '敬请期待'
				})
			}
		},
		onLoad() {
			// this.getTaskList();
			this.page.onRefresh();
		},
		computed: {
			minusColor(){
				if(this.num == 1) return '#000000';
				else if(this.num > 1) return '#BBBBBB';
			}
		},
		onShow(){
			this.getTaskList();
			this.$store.dispatch('user/getMyWallet');
		}
	}
</script>

<style lang="scss">
	.image64{
		width: 6.4vw;
		height: 6.4vw;
	}
	.title-border {
		font-size: 3.2vw;
		font-weight: 300;
		color: #A972FF;
		border: 1px solid #A972FF;
		border-radius: 1.07vw;
		padding: 0 1.07vw;
		line-height: 5.33vw;
		margin-left: 1.07vw;
	}

	.image427 {
		width: 4.27vw;
		height: 4.27vw;
	}

	.center {
		display: flex;
		align-items: center;
	}

	.stoneTotal-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 10.67vw 0;
		position: relative;

		.stone-img {
			width: 17.6vw;
			height: 17.6vw;
		}

		.total-num {
			margin-top: 2.13vw;
			font-size: 8vw;
			font-weight: 500;
			color: #fff;
		}

		.stotal-text {
			font-size: 3.73vw;
			font-weight: 300;
			color: #A972FF;
		}

		.look-box {
			display: flex;
			align-items: center;
			position: absolute;
			top: 10.67vw;
			right: 5.33vw;

			.look-text {
				font-size: 3.73vw;
				font-weight: 300;
				color: #555555;
			}
		}
	}

	.stone-box {
		background-color: #000;

		.info-box {
			padding: 8.53vw 0vw;
			background-color: #1b1b1b;
			border-radius: 6.4vw 6.4vw 0 0;

			.task-list {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.task-item {
					background-color: #000;
					padding: 4.27vw 3.2vw;
					border-radius: 2.13vw;
					width: 43.73vw;
					margin-top: 2.13vw;

					.item-info {
						display: flex;
						justify-content: space-between;
						margin-top: 5.07vw;
					}
				}
			}
		}
	}

	.product-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 4.27vw;

		.product-item {
			display: flex;
			flex-direction: column;
			background-color: #000;
			border-radius: 6.4vw;
			padding: 2.13vw;
			padding-bottom: 4.27vw;
			margin-top: 2.13vw;
			
			.product-img{
				width: 40.53vw;
				height: 40.53vw;
				border-radius: 5.33vw;
			}
			.product-title {
				width: 36vw;
				font-size: 4.27vw;
				font-weight: 500;
				color: #fff;
				overflow: hidden; //超出隐藏
				text-overflow: ellipsis; //溢出用省略号显示
				display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示。
				-webkit-line-clamp: 2; //超出两行隐藏
				-webkit-box-orient: vertical;
			}
			.product-info{
				padding: 2.13vw;
				padding-bottom: 0;
				
			}
			
			
		}
	}

	.egg-box{
		padding: 9.54vw 5.33vw 0 5.33vw;
		background-color: #1b1b1b;
		.egg-info{
			display: flex;
			.egg-image{
				width: 32vw;
				height: 32vw;
				background-color: #272727;
				border-radius: 5.33vw;
				margin-right: 3.2vw;
			}
			.egg-bottom{
				display: flex;
				flex-direction: column;
				.egg-num{
					flex: 1;
					display: flex;
					align-items: flex-end;
				}
			}
		}
	}
	.nums-box{
		margin-top: 1.87vw;
		display: flex;
		// border: 1px solid #EDEDED;
		border-radius: 2.13vw;
		/deep/.u-iconfont{
			width: 8.53vw;
			height: 8.53vw;
			display: flex;
			justify-content: center;
			background-color: #555555;
			font-weight: 300;
		}
		/deep/.uicon-minus{
			border-radius: 1.07vw 0 0 1.07vw;
		}
		/deep/.uicon-plus{
			border-radius: 0 1.07vw 1.07vw 0;
		}
		.num{
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 10.4vw;
			border-top: 1px solid #555555;
			border-bottom: 1px solid #555555;
			background-color: #1b1b1b;
			color: #FFCE80;
			font-weight: 300;
		}
	}
	
	.gash-btn{
		margin-top: 8.53vw;
		padding-left: 0 5.33vw;
		padding-bottom: calc(2.13vw + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
		padding-bottom: calc(2.13vw + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
		span{
			display: block;
			background-color: #A972FF;
			border-radius: 6.4vw;
			width: 100%;
			line-height: 12.8vw;
			text-align: center;
			font-size: 3.73vw;
			font-weight: 500;
			color: #000;
		}
	}
</style>
